<template>
    <div class="append" @touch="handleCancleClick">
       <div class="wrapper">
            <div class="info">更改用户ID是{{obj.vId}}的信息
                <p class="info-wran">
                    (注意：更改后必须点击确定提交，否则无法生效,密码是数字或者数字和字母的结合，位数不小于4位)
                </p>
            </div>
            <!-- <div class="title">用户ID:</div>
            <input type="text" class="ipt" name="Vno" v-model="obj1.id">  autofocus="autofocus" -->
            <div class="title">姓名:</div>
            <input type="text" class="ipt" name="Vname" v-model="obj1.vName" autofocus="autofocus">
            <div class="title">密码:</div>
            <input type="text" class="ipt" name="Vage"  v-model="obj1.vPassword">
            <input type="button" class="button" value="提交" @click="handleSubmitClick">
            <input type="button" class="button button1" value="取消" @click="handleCancleClick">
       </div>
    </div>
</template>

<script>
import { mapState } from 'Vuex'
import axios from 'axios'
export default {
  name: 'adminAlter',
  computed: {
    ...mapState(['userId'])
  },
  methods: {
    handleCancleClick () {
      this.$emit('cancle')
    },
    handleSubmitClick () {
      axios.post('http://192.168.43.188:8081/alterVoter', {
        'vId': this.obj1.vId,
        'vPassword': this.obj1.vPassword,
        'vName': this.obj1.vName,
        'vMid': this.userId
      }).then(({status, data}) => {
        if (status === 200) {
          console.log(data)
          if (data && data.code == 111) { //eslint-disable-line
            /* 这个地方不使用严格等于，严格等于的话不成立，因为数据类型不相同 */
            swal('修改用户成功', '', 'success')
            this.$emit('alterPerson', this.obj1)
          } else {
            swal(data.msg)
          }
        } else {
          swal('无法获得服务器', '', 'error')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    }
  },
  props: {
    obj: Object
  },
  data () {
    return {
      obj1: JSON.parse(JSON.stringify(this.obj))
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.append
    z-index: 2
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: rgba(0, 0, 0, .4)
    .wrapper
        overflow: hidden
        margin: auto
        margin-top: 1.5rem
        width: 50%
        background: #fff
        padding: 0.4rem .3rem
        border: .02rem #fff solid
        border-radius: .2rem
        .info
            font-size: .5rem
            line-height: 1rem
            border-bottom: .02rem #aaa solid
            .info-wran
                color: red
                font-size: .32rem
        .title
            padding: .2rem 0
            font-size: .32rem
            font-weight: 700
        .ipt
             line-height: .6rem
             font-size: .32rem
             border: .02rem #ccc solid
             width: 100%
             color: #333
             padding: 0 .05rem
        .ipt:focus
            border: $bgcolor .02rem solid
        .button
            background: $bgcolor
            color: #fff
            padding: 0  .2rem
            font-size: .36rem
            margin: .3rem .3rem 0 .3rem
            line-height: .7rem
            float: right
            font-weight: 700
            border-radius: .1rem
            border: .02rem solid $bgcolor
            cursor: pointer
        .button1
            background: #fff
            color: #666
            border: .02rem solid #666
        .pintro
            height: 1.5rem
            line-height: .5rem
</style>
